<template>
    <!-- 设备管理-报警设置 -->
    <div class="mainContent">
        <div class="search searchBox">
            <div class="list">
                <span>关键字搜索：</span>
                <Input v-model="keyword" placeholder="请输入报警名称" style="width:200px" maxlength="15" clearable/>
            </div>
            <div class="list">
                <span>报警类型：</span>
                <Select v-model="rule" filterable style="width:200px;" placeholder="请选择报警类型">
                    <Option v-for="item in ruleTypeList" :value="item.id" :key="item.id">{{ item.name }}</Option>
                </Select>
            </div>
            <div class="list">
                <span>状态：</span>
                <Select v-model="enableFlag" filterable style="width:200px;" placeholder="请选择状态">
                    <Option v-for="item in enableFlagList" :value="item.id" :key="item.id">{{ item.name }}</Option>
                </Select>
            </div>
            <input type="password" autocomplete="new-password" style="display: none" />
            <div class="list">
                <el-button type="primary" @click="searchAll" style="padding:10px 25px;">搜索</el-button>
                <el-button type="info" @click="clear" style="margin-left:20px;padding:10px 25px;" plain>重置</el-button>
            </div>
        </div>
        <div class="tabBox">
            <div class="down">
                <el-button :type="!btnList.includes('mach/warn/setting/add')?'info':'primary'" :disabled="!btnList.includes('mach/warn/setting/add')" @click="updataRow(0)" size="small"  style="border-radius: 2px;padding:10px 20px;">+ 添加报警</el-button>
            </div>
            <div class="tableList">
                <el-table :data="list" style="width: 100%" :stripe="true">
                    <el-table-column fixed prop="name" label="报警名称" width="250px" class-name='tableClassName'></el-table-column>
                    <el-table-column prop="ruleType" label="报警类型">
                        <template slot-scope="scope">
                            <span v-if="scope.row.ruleType == 101">出区域</span>
                            <span v-if="scope.row.ruleType == 102">偷漏油</span>
                            <span v-if="scope.row.ruleType == 103">电量</span>
                            <span v-if="scope.row.ruleType == 104">怠机</span>
                            <span v-if="scope.row.ruleType == 105">停机</span>
                            <span v-if="scope.row.ruleType == 106">工作</span>
                            <span v-if="scope.row.ruleType == 107">超速</span>
                            <span v-if="scope.row.ruleType == 109">拆解硬件</span>
                            <span v-if="scope.row.ruleType == 110">倾斜</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="machCode" label="报警规则">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" v-show="scope.row.ruleType == 101" @click="getGpsdetails(scope.$index, list)" style="color:#1891FF;">查看详情</el-button>
                            <span v-if="scope.row.ruleType == 102">暂无</span>
                            <span v-if="scope.row.ruleType == 104">怠机时长>{{ scope.row.ruleValue }}分钟</span>
                            <span v-if="scope.row.ruleType == 105">停机时长>{{ scope.row.ruleValue }}分钟</span>
                            <span v-if="scope.row.ruleType == 106">工作时长>{{ scope.row.ruleValue }}分钟</span>
                            <span v-if="scope.row.ruleType == 107">速度>{{ scope.row.ruleValue }}km/h</span>
                            <span v-if="scope.row.ruleType ==109">暂无</span>

                            <div class="p" v-if="scope.row.ruleType == 110">
                                <Tooltip  transfer  placement="top-start"  max-width='200'>
                                <div slot="content">
                                    <p v-if=" scope.row.machRotationRuleDTO.preRotationX > 0">前倾斜角度>{{ scope.row.machRotationRuleDTO.preRotationX || 0}}° </p>
                                    <p v-if=" scope.row.machRotationRuleDTO.postRotationX > 0">后倾斜角度>{{ scope.row.machRotationRuleDTO.postRotationX || 0}}°</p>
                                    <p v-if=" scope.row.machRotationRuleDTO.leftRotationZ > 0">左倾斜角度>{{ scope.row.machRotationRuleDTO.leftRotationZ || 0}}°</p>
                                    <p v-if=" scope.row.machRotationRuleDTO.rightRotationZ > 0">右倾斜角度>{{ scope.row.machRotationRuleDTO.rightRotationZ || 0}}°</p>
                                </div>
                                    <div style="width:140px;overflow: hidden;text-overflow:ellipsis;white-space:nowrap;cursor: pointer;color:#58595A;">
                                        <span v-if=" scope.row.machRotationRuleDTO.preRotationX > 0">前倾斜角度>{{ scope.row.machRotationRuleDTO.preRotationX || 0}}° </span>
                                        <span v-if=" scope.row.machRotationRuleDTO.postRotationX > 0">后倾斜角度>{{ scope.row.machRotationRuleDTO.postRotationX || 0}}° </span>
                                        <span v-if=" scope.row.machRotationRuleDTO.leftRotationZ > 0">左倾斜角度>{{ scope.row.machRotationRuleDTO.leftRotationZ || 0}}° </span>
                                        <span v-if=" scope.row.machRotationRuleDTO.rightRotationZ > 0">右倾斜角度>{{ scope.row.machRotationRuleDTO.rightRotationZ || 0}}° </span>
                                    </div>
                                </Tooltip>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="生效时间">
                        <template slot-scope="scope">
                            <div v-if="scope.row.timeList.length > 0">
                                <p v-for="(val, i) in scope.row.timeList" :key="i">
                                    <span>{{ val.startTime }}</span>
                                    <span>--</span>
                                    <span>{{ val.endTime }}</span>
                                </p>
                            </div>
                            <div v-else>
                                <span>00:00</span>
                                <span>--</span>
                                <span>23:59</span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="machCode" label="状态">
                        <template slot-scope="scope">
                            <div v-if="scope.row.enableFlag == 1">
                                <!-- <Icon type="ios-checkmark-circle-outline" style="color:#39B104;font-size: 18px;"/> -->
                                <span class="green">启用</span>
                            </div>
                            <div v-if="scope.row.enableFlag ==0">
                                <!-- <img src="../../assets/images/mach/warn/mach_disable.png" alt="" width="15" height="15" style="vertical-align: middle;"> -->
                                <span class="red">禁用</span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="400px" align="center" class-name="operationBtn" v-if="btnList.includes('mach/warn/setting/edit') || btnList.includes('mach/warn/setting/machList') || btnList.includes('mach/warn/setting/time') || btnList.includes('mach/warn/setting/user') || btnList.includes('mach/warn/setting/enable') || btnList.includes('mach/warn/setting/disable') || btnList.includes('mach/warn/setting/del')">
                        <template slot-scope="scope">
                            <el-button :disabled="!btnList.includes('mach/warn/setting/edit')"  @click.native.prevent="updataRow(1, scope.$index, list)" type="text" size="small" style="color:#1891FF;">编辑</el-button>
                            <el-button :disabled="!btnList.includes('mach/warn/setting/machList')"  @click.native.prevent="addMach(scope.$index, list)" type="text" size="small" style="color:#1891FF;">报警设备</el-button>
                            <el-button :disabled="scope.row.ruleType == 102 || !btnList.includes('mach/warn/setting/time')" @click.native.prevent="addTime(scope.$index, list)" type="text" size="small" style="color:#1891FF;">生效时间</el-button>
                            <el-button :disabled="!btnList.includes('mach/warn/setting/user')" @click.native.prevent="addEmp(scope.$index, list)" type="text" size="small" style="color:#1891FF;">报警接收人</el-button>
                            <el-button v-if="scope.row.enableFlag == 0  && btnList.includes('mach/warn/setting/enable')" @click.native.prevent="getEmable(1, scope.$index, list)" type="text" size="small" v-preventReClick="1500" style="color:#1891FF;">启用</el-button>
                            <el-button v-if="scope.row.enableFlag == 1  && btnList.includes('mach/warn/setting/disable')" @click.native.prevent="getEmable(0, scope.$index, list)" type="text" size="small" v-preventReClick="1500" style="color:#1891FF;">禁用</el-button>
                            <el-button v-if="btnList.includes('mach/warn/setting/del')&&scope.row.enableFlag ==0" style="color:red" @click.native.prevent="remove(scope.$index, list)" type="text" size="small">删除</el-button>
                            <!-- <el-button v-else :disabled="!btnList.includes('mach/warn/setting/del')" type="text" size="small" style="color:#1891FF;">删除</el-button> -->
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="clearfix"  >
                <div class="float-right">
                    <Page v-if="totalCount" style="margin: 20px 0;text-align: center;" :current.sync="current" :total="totalCount" :page-size="pageSize" show-elevator show-total @on-change="pageChange"></Page>
                </div>
            </div>
        </div>

        <Modal v-model="updateModal" :title="isAdd ? '新增报警' : '编辑报警'" width="820px;" :mask-closable="false" class-name="msgModal">
            <div class="msgBox" style="display:flex; justify-content: flex-start;align-items: flex-start;">
                <div class="info" :style="{'flex':'1','height': '100%','border-right': ruleType != 110 ? '1px solid var(--themeColor)' :'none'}">
                    <div class="title">
                        <h2>
                            <span class="bc"></span>
                            <span>报警类型</span>
                        </h2>
                    </div>
                    <div class="infoBox" style="margin:10px auto;">
                         <RadioGroup v-model="ruleType" vertical >
                            <Radio :label="item.id" v-for="(item,index) in ruleTypeList" :key="index" :disabled = !isAdd>
                                <Icon type="social-apple"></Icon>
                                <span style="font-family: MicrosoftYaHei;font-size:14px;">{{item.name}}</span>
                            </Radio>
                        </RadioGroup>
                    </div>
                </div>
                <div class="info"  :style="{'flex':'1','height': '100%','border-left': ruleType == 110 ? '1px solid var(--themeColor)' :'none'}">
                    <div class="title">
                        <h2>
                            <span class="bc"></span>
                            <span>报警规则</span>
                        </h2>
                    </div>
                    <div class="infoBox" style="margin:20px auto;">
                        <div class="left" style="width:100%;">
                            <div class="list" style="width:100%;">
                                <div class="item" style="width:100%;">
                                    <span class="tip">*</span>
                                    <span class="span">报警名称</span>
                                    <Input  v-model="ruleName" :maxlength="count" placeholder="请输入报警名称" style="width:250px" clearable/>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="infoBox" style="margin:20px auto;">
                        <div class="left" style="width:100%;">
                            <div class="list" style="width:100%;">
                                <div class="item" style="width:100%;">
                                    <span class="tip" style="top:-8px;">*</span>
                                    <span class="span">报警规则</span>
                                </div>
                            </div>
                            <div class="list" style="width:92%;margin:20px auto;" v-if="ruleType == 101">
                                <div class="item"  style="width:100%;">
                                    <el-button type="primary" @click="getGps" size="small">
                                        <span v-if="type == ''" style="color:#FFF;">点击设置区域范围</span>
                                        <span v-if="type != ''" style="color:#FFF;">点击查看范围区域</span>
                                    </el-button>
                                </div>
                            </div>
                            <div class="list" style="width:92%;margin:20px auto;" v-if="ruleType == 102">
                                <div class="item" style="width:100%;">
                                    <span class="span">暂无</span>
                                </div>
                            </div>
                            <div class="list" style="width:92%;margin:20px auto;" v-if="ruleType == 104">
                                <div class="item" style="width:100%;">
                                    <span class="span">怠机时长<Icon type="ios-arrow-forward" /></span>
                                    <InputNumber v-model="ruleValue" :min="0" :max="10000" style="width:80px;margin-right:10px;"></InputNumber>
                                    <span class="span" style="width:80px;">分钟报警</span>
                                </div>
                            </div>
                            <div class="list" style="width:92%;margin:20px auto;" v-if="ruleType == 105">
                                <div class="item" style="width:100%;">
                                    <span class="span">停机时长<Icon type="ios-arrow-forward" /></span>
                                    <InputNumber v-model="ruleValue" :min="0" :max="10000" style="width:80px;margin-right:10px;"></InputNumber>
                                    <span class="span" style="width:80px;">分钟报警</span>
                                </div>
                            </div>
                            <div class="list" style="width:92%;margin:20px auto;" v-if="ruleType == 106">
                                <div class="item" style="width:100%;">
                                    <span class="span">工作时长<Icon type="ios-arrow-forward" /></span>
                                    <InputNumber v-model="ruleValue" :min="0" :max="10000" style="width:80px;margin-right:10px;"></InputNumber>
                                    <span class="span" style="width:80px;">分钟报警</span>
                                </div>
                            </div>
                            <div class="list" style="width:92%;margin:20px auto;display:block;" v-if="ruleType == 110">
                                <div class="item" style="width:100%;margin-bottom:15px;">
                                    <span class="span">前倾斜角度<Icon type="ios-arrow-forward" /></span>
                                    <InputNumber clearable  placeholder="请输入" v-model="preRotationX" :min="0" :max="180" style="width:80px;margin-right:10px;"></InputNumber>
                                    <span class="span" style="width:80px;">° 时报警</span>
                                </div>
                                <div class="item" style="width:100%;margin-bottom:15px;">
                                    <span class="span">后倾斜角度<Icon type="ios-arrow-forward" /></span>
                                    <InputNumber clearable  placeholder="请输入" v-model="postRotationX" :min="0" :max="180" style="width:80px;margin-right:10px;"></InputNumber>
                                    <span class="span" style="width:80px;">° 时报警</span>
                                </div>
                                <div class="item" style="width:100%;margin-bottom:15px;">
                                    <span class="span">左倾斜角度<Icon type="ios-arrow-forward" /></span>
                                    <InputNumber clearable  placeholder="请输入" v-model="leftRotationZ" :min="0" :max="180" style="width:80px;margin-right:10px;"></InputNumber>
                                    <span class="span" style="width:80px;">° 时报警</span>
                                </div>
                                <div class="item" style="width:100%;margin-bottom:15px;">
                                    <span class="span">右倾斜角度<Icon type="ios-arrow-forward" /></span>
                                    <InputNumber clearable  placeholder="请输入" v-model="rightRotationZ" :min="0" :max="180" style="width:80px;margin-right:10px;"></InputNumber>
                                    <span class="span" style="width:80px;">° 时报警</span>
                                </div>
                            </div>
                            <div class="list" style="width:92%;margin:20px auto;" v-if="ruleType == 107">
                                <div class="item" style="width:100%;">
                                    <span class="span">超速报警<Icon type="ios-arrow-forward" /></span>
                                    <InputNumber  v-model="ruleValue" :min="0" :max="10000" style="width:80px;margin-right:10px;"></InputNumber>
                                    <span style="width:100px;">时报警（km/h）</span>
                                </div>
                            </div>
                            <div class="list" style="width:92%;margin:20px auto;" v-if="ruleType == 109">
                                <div class="item" style="width:100%;">
                                    <span class="span">暂无</span>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <div slot="footer">
                <el-button @click="cancel(0)" style="padding:7px 25px;border-radius: 15px;" type="info" size="mini">取消</el-button>
                <el-button @click="submitAll" type="primary"  style="padding:7px 25px;border-radius: 15px;" size="mini"  v-preventReClick="1500">确定</el-button>
            </div>
        </Modal>

        <Modal v-model="delMachModal" title="删除" width="360px;" :mask-closable="false" class-name="msgModal">
            <div style="margin:10px">确定要删除这条数据吗？</div>
            <div slot="footer">
                <el-button @click="cancel(1)" style="padding:7px 25px;border-radius: 15px;" type="info" size="mini">取消</el-button>
                <el-button @click="detelemach" type="primary"  style="padding:7px 25px;border-radius: 15px;" size="mini"  v-preventReClick="1500">确定</el-button>
            </div>
        </Modal>

        <Modal v-model="GPSModal" title="设置范围区域" width="1300px" :mask-closable="false" class-name="msgModal">
            <div class="msg">
                <div class="fence">
                    <div id="container" class="container" style="border:1px solid var(--themeColor);"></div>
                    <div class="searchAddress">
                         <Input search clearable enter-button placeholder="请输入准确的项目地址"  style="width:300px"  @on-search="searchAddress" v-model="address" />
                    </div>
                </div>
                <div class="right">
                <div class="top">
                    <input type="radio" name="func" value="polygon" clearable/>
                    <span class="input-text" style="width:70px;">画多边形</span>
                    <input type="radio" name="func" value="circle" clearable/>
                    <span class="input-text">画圆</span>
                </div>
                <div class="isShow" v-show="sub == 1">
                    点击鼠标“左键”开始绘图，点击鼠标“右键”或“双击左键”结束绘图
                </div>
                <div class="center">
                    <p v-show="sub !== 0">
                        <span>经度</span>
                        <span>纬度</span>
                    </p>
                    <div v-for="(item,index) in polygonPointList" :key="index" v-show="sub == 1">
                        <Input v-model="item.lng" placeholder="请输入经度" style="width:80px" clearable/>
                        <Input v-model="item.lat" placeholder="请输入纬度" style="width:80px ;margin-right:10px;margin-left:10px;" clearable/>
                        <el-button @click="removeRow(index)" :disabled="polygonPointList.length == 3" :type="polygonPointList.length == 3?'info':'danger'" size="small" plain>删除</el-button>
                    </div>
                    <div v-show="sub == 2">
                        <Input v-model="radius" placeholder="请输入半径" style="width:200px" clearable/>
                    </div>
                    <div v-show="sub == 2">
                        <Input v-model="centerPoint.lng" placeholder="请输入半径" style="width:80px" clearable/>
                        <Input v-model="centerPoint.lat" placeholder="请输入半径" style="width:80px;margin-left:10px" clearable/>
                    </div>
                    <p v-if="sub !== 0">
                        <el-button type="primary" @click="addRow" style="margin-right:20px" size="small" plain v-if="sub == 1">加点</el-button>
                        <el-button type="primary" @click="drawArea" style="margin-right:20px" size="small" plain>绘制</el-button>
                    </p>
                    </div>
                </div>
            </div>
            <div slot="footer">
                <el-button @click="cancel(2)" style="padding:7px 25px;border-radius: 15px;" type="info" size="mini">取消</el-button>
                <el-button @click="sumbitGps" type="primary"  style="padding:7px 25px;border-radius: 15px;" size="mini"  v-preventReClick="1500">确定</el-button>
            </div>
        </Modal>

        <Modal v-model="GPSdetailsModal" width="1000px" title="电子围栏报警区域" :mask-closable="false" :footer-hide="true" class-name="msgModal">
            <div class="msg">
                <div style="width:900px;height:500px;margin:20px auto;border:1px solid var(--themeColor);">
                    <div id="fenceMap" class="fenceMap"></div>
                </div>
            </div>
        </Modal>

        <Modal v-model="timeModal" title="生效时间设置" width="400px;" :mask-closable="false" class-name="msgModal">
            <div class="warn" >
                <div class="list">
                    <span>生效时间:</span>
                    <el-button @click="addTimeRow" style="padding:7px 25px;border-radius: 15px;"  :disabled="timeList.length == 3" :type="timeList.length == 3?'info':'primary'" size="small">添加</el-button>
                </div>
                <div class="list">
                    <div class="item1">
                        <div v-for="(val, i) in timeList" :key="i" style="margin-bottom:10px">
                            <TimePicker format="HH:mm" type="timerange" placement="bottom-end" placeholder="请选择时间" style="width: 168px" v-model="timeList[i].time" :clearable="false"></TimePicker>
                            <el-button @click="removeTimeRow(i)" style="padding:7px 25px;border-radius: 15px;" :disabled="timeList.length == 1" :type="timeList.length == 1?'info':'danger'" size="small">删除</el-button>
                        </div>
                    </div>
                </div>
            </div>
            <div slot="footer">
                <el-button @click="cancel(3)" style="padding:7px 25px;border-radius: 15px;" type="info" size="mini">取消</el-button>
                <el-button @click="sumbitTime" type="primary"  style="padding:7px 25px;border-radius: 15px;" size="mini"  v-preventReClick="1500">确定</el-button>
            </div>
        </Modal>

        <Modal v-model="machObjModal" title="报警设备设置" width="700px;" :mask-closable="false" class-name="msgModal">
            <div class="transfer">
                    <el-transfer v-model="machlist" :data="msgList" filterable :filter-method="filterMethod" ref="myTransfer" filter-placeholder="请输入设备名称，编号" :titles="['所有设备', '已有设备']">
                </el-transfer>
            </div>
            <div slot="footer">
                <el-button @click="cancel(4)" style="padding:7px 25px;border-radius: 15px;" type="info" size="mini">取消</el-button>
                <el-button @click="subMitMach" type="primary"  style="padding:7px 25px;border-radius: 15px;" size="mini" v-preventReClick="1500">确定</el-button>
            </div>
        </Modal>

        <Modal v-model="empModal" title="报警接收人" width="660px;" :mask-closable="false" class-name="msgModal">
            <div class="ask">
                <span>通知方式:</span>
                <el-checkbox-group v-model="checkList">
                    <!-- <el-checkbox label="短信通知"></el-checkbox> -->
                    <el-checkbox label="APP通知"></el-checkbox>
                    <el-checkbox label="后台通知"></el-checkbox>
                </el-checkbox-group>
            </div>
            <el-transfer v-model="isEmplist" :data="empList" :titles="['所有接收人员', '已有接收人员']"></el-transfer>
            <div slot="footer">
                <el-button @click="cancel(5)" style="padding:7px 25px;border-radius: 15px;" type="info" size="mini">取消</el-button>
                <el-button @click="suBmitEmp" type="primary"  style="padding:7px 25px;border-radius: 15px;" size="mini"  v-preventReClick="1500">确定</el-button>
            </div>
        </Modal>
    </div>
</template>
<script>
import { getMsgRuleAvailableUsers } from "@/api/api.js";
import {
    getMachRulelist_V1,
    getMachRuleEdit_V1,
    getMachRuleAdd_V1,
    getMachRuleEnable_V1,
    getMachRuleDel_V1,
    getMachRuleSetTime_V1,
    getMachObjectlist_V1,
    getMachObjectAddList_V1,
    getMachObjectAdd_V1,
    getMachUseList_V1,
    getMachUseAdd_V1
} from "@/api/mach.js";

export default {
    data() {
        return {
            current: 1,
            pageSize: 10,
            pageNum: 1,
            totalCount: 0,
            keyword: "",
            list: [],
            btnList: [],
            rule: "",
            ruleTypeList: [
                {
                    id: 104,
                    name: "怠机"
                },
                {
                    id: 105,
                    name: "停机"
                },
                {
                    id: 106,
                    name: "工作"
                },
                {
                    id: 107,
                    name: "超速"
                },
                {
                    id: 110,
                    name: "倾斜"
                },
                {
                    id: 101,
                    name: "出区域"
                },
                {
                    id: 102,
                    name: "偷漏油"
                },
                {
                    id: 109,
                    name: "拆解硬件"
                },
            ],
            isAdd: true,
            updateModal: false,
            delMachModal: false,
            GPSModal: false,
            GPSdetailsModal: false,
            timeModal: false,
            delMachId: "",
            ruleType: 104,
            ruleValue: 0,
            type: "",
            polygonPointList: [],
            radius: "",
            centerPoint: {},
            ruleName: "",
            ruleId: "",
            porjectTypeId: "",
            flag: false,
            timeList: [
                {
                    time: []
                }
            ],
            timeId: "",
            machlist: [],
            empModal: false,
            msgList: [],
            count: 15,
            cover: "",
            machObjModal: false,
            empList: [],
            isEmplist: [],
            checkList: [],
            TZList: [
                {
                    id: 1,
                    name: "APP通知"
                },
                {
                    id: 2,
                    name: "公众号通知"
                },
                {
                    id: 3,
                    name: "后台通知"
                },
                {
                    id: 4,
                    name: "短信通知"
                }
            ],
            enableFlag: "",
            enableFlagList: [
                {
                    id: 0,
                    name: "禁用"
                },
                {
                    id: 1,
                    name: "启用"
                }
            ],
            fenceObj :{},
            province: "",
            citySelect: "",
            districtSelect: "",
            areaSelect: "",
            district: "",
            citycode: "",
            polygons: [],
            sub:0,
            fenceMap:"",
            address:"",
            lat:"",
            lng:"",
            preRotationX:"",
            postRotationX:"",
            leftRotationZ:"",
            rightRotationZ:"",
        };
    },
    computed: {
        porjectObject() {
            return this.$store.state.porjectObject;
        }
    },
    watch: {
        porjectObject(val, oldVal) {
            if (val.deptId != oldVal.deptId) {
                this.porjectTypeId = val.deptId;
                this.keyword = "";
                this.rule = "";
                this.enableFlag = "";
                this.lat = val.lat == undefined?30.592335: val.lat;
                this.lng = val.lng == undefined?114.29484: val.lng;
                this.pageNum = 1;
                this.current = 1;
                this.getAllList();
            }
        },
        // 缓存上一次的区域
        sub(val, oldVal) {
            if (val == 1) {
                if (this.polygonPointList[0].lat !== "" && this.polygonPointList[0].lng !== "") {
                    this.fenceMap.clearMap();
                    var path = [];
                    for (let i = 0; i < this.polygonPointList.length; i++) {
                        //多边形的坐标点
                        let x = [this.polygonPointList[i].lng, this.polygonPointList[i].lat];
                        path.push(x);
                    }
                    this.cover = new AMap.Polygon({
                        path: path,
                        strokeColor: "#ff00ff",
                        strokeWeight: 6,
                        strokeOpacity: 0.2,
                        fillOpacity: 0.4,
                        fillColor: "#ff00ff",
                        zIndex: 50,
                    });
                    this.cover.setMap(this.fenceMap);
                    // 缩放地图到合适的视野级别
                    this.fenceMap.setFitView(this.cover);
                }
            } else if (val == 2) {
                if (this.radius !== "" && this.radius !== undefined) {
                    this.fenceMap.clearMap();
                    this.cover = new AMap.Circle({
                        center: [this.centerPoint.lng, this.centerPoint.lat],
                        radius: this.radius, //半径
                        borderWeight: 3,
                        strokeColor: "#ff00ff",
                        strokeWeight: 6,
                        strokeOpacity: 0.2,
                        fillOpacity: 0.4,
                        strokeStyle: "dashed",
                        strokeDasharray: [10, 10],
                        // 线样式还支持 'dashed'
                        fillColor: "#ff00ff",
                        zIndex: 50,
                    });
                    this.cover.setMap(this.fenceMap);
                    // 缩放地图到合适的视野级别
                    this.fenceMap.setFitView(this.cover);
                }
            }
        },
    },
    mounted() {
        this.porjectTypeId = this.$store.state.porjectObject.deptId;
        this.lat = this.$store.state.porjectObject.lat == undefined?30.592335:this.$store.state.porjectObject.lat;
        this.lng = this.$store.state.porjectObject.lng == undefined?114.29484:this.$store.state.porjectObject.lng;
        this.getAllList();
        this.btnList = JSON.parse(localStorage.getItem("arr"));
    },
    methods: {
        //报警设置列表
        getAllList() {
            let parmas = {
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                ruleType: this.rule,
                keyword: this.keyword,
                deptId: this.porjectTypeId,
                enableFlag: this.enableFlag
            };
            getMachRulelist_V1(parmas)
                .then(res => {
                    if (res.code == 200) {
                        this.list = res.data.list;
                        this.totalCount = res.data.total;
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        pageChange(index) {
            this.pageNum = index;
            this.getAllList();
        },
        searchAll() {
            this.getAllList();
        },
        clear() {
            this.keyword = "";
            this.rule = "";
            this.enableFlag = "";
            this.pageNum = 1;
            this.current = 1;
            this.getAllList();
        },
        //启用禁用
        getEmable(type, index, rows) {
            let params = {
                enableFlag: type,
                ruleId: rows[index].ruleId
            };
            getMachRuleEnable_V1(params)
                .then(res => {
                    if (res.code == 200) {
                        this.$Message.success("操作成功");
                        this.getAllList();
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        //删除
        remove(index, rows) {
            this.delMachId = rows[index].ruleId;
            this.delMachModal = true;
        },
        detelemach() {
            getMachRuleDel_V1(this.delMachId)
                .then(res => {
                    if (res.code == 200) {
                        this.delMachModal = false;
                        this.$Message.success("操作成功");
                        this.getAllList();
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        //新增编辑报警对象
        getRuleType(index) {
            this.ruleType = index;
            this.ruleValue = 0;
            this.preRotationX = "";
            this.postRotationX = "";
            this.leftRotationZ = "";
            this.rightRotationZ = "";
            this.type = "";
            this.polygonPointList = [];
            this.radius = "";
            this.centerPoint = {};
            this.ruleName = "";
        },
        updataRow(type, index, rows) {
            this.updateModal = true;
            let arr = [
                {
                    lat:"",
                    lng:"",
                },
                {
                    lat:"",
                    lng:"",
                },
                {
                    lat:"",
                    lng:"",
                },
            ]
            if (type == 0) {
                this.isAdd = true;
                this.ruleValue = 0;
                this.ruleType = 104;
                this.preRotationX = "";
                this.postRotationX = "";
                this.leftRotationZ = "";
                this.rightRotationZ = "";
                this.type = "";
                this.polygonPointList =arr;
                this.radius = "";
                this.centerPoint = {};
                this.ruleName = "";
                this.fenceObj ={};
            } else if (type == 1) {
                this.isAdd = false;
                this.fenceObj =rows[index];
                this.ruleValue = rows[index].ruleValue == "" ? 0 : parseInt(rows[index].ruleValue);
                this.ruleName = rows[index].name;
                this.type = rows[index].type;
                this.polygonPointList = rows[index].polygonPointList == undefined ?arr : rows[index].polygonPointList;
                this.centerPoint = rows[index].centerPoint == undefined ? {} : rows[index].centerPoint;
                this.radius = rows[index].radius;
                this.ruleId = rows[index].ruleId;
                this.ruleType = rows[index].ruleType;
                if(rows[index].machRotationRuleDTO){
                    this.preRotationX =  rows[index].machRotationRuleDTO.preRotationX || "";
                    this.postRotationX =  rows[index].machRotationRuleDTO.postRotationX || "";
                    this.leftRotationZ =  rows[index].machRotationRuleDTO.leftRotationZ || "";
                    this.rightRotationZ =  rows[index].machRotationRuleDTO.rightRotationZ || "";
                }
            }
        },
        removeRow(index) {
            this.polygonPointList.splice(index, 1);
        },
        addRow() {
            let obj = {
                lat: "",
                lng: "",
            };
            this.polygonPointList.push(obj);
        },
        drawArea() {
            if (this.sub == 1) {
                this.fenceMap.clearMap();
                var path = [];
                for (let i = 0; i < this.polygonPointList.length; i++) {
                    if (
                        this.polygonPointList[i].lat == "" ||
                        this.polygonPointList[i].lng == ""
                    ) {
                        this.$Modal.warning({
                            title: "您有必填字段",
                            content: "经纬度不能为空",
                        });
                    }
                    //多边形的坐标点
                    let x = [this.polygonPointList[i].lng, this.polygonPointList[i].lat];
                    path.push(x);
                }
                this.cover = new AMap.Polygon({
                    path: path,
                    strokeColor: "#ff00ff",
                    strokeWeight: 6,
                    strokeOpacity: 0.2,
                    fillOpacity: 0.4,
                    fillColor: "#ff00ff",
                    zIndex: 50,
                });
                this.cover.setMap(this.fenceMap);
            } else if (this.sub == 2) {
                if (this.radius == "") {
                    this.$Modal.warning({
                        title: "您有必填字段",
                        content: "半径不能为空",
                    });
                }
                if (this.centerPoint.lng == "" || this.centerPoint.lat == "") {
                    this.$Modal.warning({
                        title: "您有必填字段",
                        content: "经纬度不能为空",
                    });
                }
                this.fenceMap.clearMap();
                this.cover = new AMap.Circle({
                    center: [this.centerPoint.lng, this.centerPoint.lat],
                    radius: this.radius, //半径
                    borderWeight: 3,
                    strokeColor: "#ff00ff",
                    strokeWeight: 6,
                    strokeOpacity: 0.2,
                    fillOpacity: 0.4,
                    strokeStyle: "dashed",
                    strokeDasharray: [10, 10],
                    // 线样式还支持 'dashed'
                    fillColor: "#ff00ff",
                    zIndex: 50,
                });
                this.cover.setMap(this.fenceMap);
                // 缩放地图到合适的视野级别
                this.fenceMap.setFitView(this.cover);
            }
        },
        searchAddress(){
            if(this.address == "") {
                this.$Modal.warning({
                    title: "您有必填字段",
                    content: "请输入地址"
                });
                return;
            }
            var _that =this;
            AMap.service("AMap.Geocoder", function() {
                var geocoder = new AMap.Geocoder({
                    city: "", //城市设为北京，默认：“全国”
                });
                var marker = new AMap.Marker();
                geocoder.getLocation(_that.address, function(status, result) {
                    if (status === 'complete'&&result.geocodes.length) {
                        var lnglat = result.geocodes[0].location
                        marker.setPosition(lnglat);
                        _that.fenceMap.setFitView(marker);
                    }else{
                        _that.$Message.warning('根据地址查询位置失败');
                        // log.error('根据地址查询位置失败');
                    }
                });
            });

        },
        getGps() {
            if(this.sub === 0) {
                this.sub = this.fenceObj.type;
            }
            var _that = this;
            _that.GPSModal = true;
            if (_that.type == 1) {
                var polygonPointList = _that.polygonPointList;
                var a = [];
                var b = [];
                var path = [];
                for (let i in polygonPointList) {
                    a.push(polygonPointList[i].lat);
                    b.push(polygonPointList[i].lng);
                    //多边形的坐标点
                    let x = [polygonPointList[i].lng, polygonPointList[i].lat];
                    path.push(x);
                }
                let latSum = 0;
                for (let i in a) {
                    latSum += a[i];
                }
                var lat = latSum / a.length;
                let lngSum = 0;
                for (let i in b) {
                    lngSum += b[i];
                }
                var lng = lngSum / b.length;
                _that.cover = new AMap.Polygon({
                    path: path,
                    strokeColor: "#ff00ff",
                    strokeWeight: 6,
                    strokeOpacity: 0.2,
                    fillOpacity: 0.4,
                    fillColor: "#ff00ff",
                    zIndex: 50
                });
                _that.fenceMap = new AMap.Map("container", {
                    zoom: 14,
                    center: [lng, lat]
                });
            } else if (_that.type == 2) {
                var lat = _that.centerPoint.lat;
                var lng = _that.centerPoint.lng;
                var radius = _that.radius;
                _that.cover = new AMap.Circle({
                    center: [lng, lat],
                    radius: radius, //半径
                    borderWeight: 3,
                    strokeColor: "#ff00ff",
                    strokeWeight: 6,
                    strokeOpacity: 0.2,
                    fillOpacity: 0.4,
                    strokeStyle: "dashed",
                    strokeDasharray: [10, 10],
                    // 线样式还支持 'dashed'
                    fillColor: "#ff00ff",
                    zIndex: 50
                });
                _that.fenceMap = new AMap.Map("container", {
                    zoom: 14,
                    center: [lng, lat]
                });
            } else {
                if (_that.lng == undefined) {
                    _that.fenceMap = new AMap.Map("container", {
                        zoom: 14
                    });
                } else {
                    _that.fenceMap = new AMap.Map("container", {
                        zoom: 14,
                        center: [_that.lng, _that.lat]
                    });
                }
            }
            var radios = document.getElementsByName("func");
            //清空input的选择
            for(var i = 0; i < radios.length; i += 1){
                 radios[i].checked="";
            }
            var mouseTool = new AMap.MouseTool(_that.fenceMap);
            // 构造官方卫星、路网图层
            var satelliteLayer = new AMap.TileLayer.Satellite();
            var roadNetLayer = new AMap.TileLayer.RoadNet();
            //添加图层
            _that.fenceMap.add([satelliteLayer, roadNetLayer]);
            if (_that.type == 1) {
                _that.fenceMap.add(_that.cover);
                // 缩放地图到合适的视野级别
                _that.fenceMap.setFitView([_that.cover]);
            } else if (_that.type == 2) {
                // circle.setMap(map);
                _that.fenceMap.add(_that.cover);
                // 缩放地图到合适的视野级别
                _that.fenceMap.setFitView([_that.cover]);
            }
            var arr = [];
            mouseTool.on("draw", function(e) {
                if (_that.type != "") {
                    _that.fenceMap.remove(_that.cover);
                }
                if (arr.length >= 1) {
                    _that.fenceMap.remove(arr);
                    arr.push(e.obj);
                } else {
                    arr.push(e.obj);
                }
                if (arr.length > 0) {
                    //记录多边形的点
                    if (arr[arr.length - 1].CLASS_NAME == "AMap.Polygon") {
                        var x= [];
                        let pathArr = arr[arr.length - 1].Ce ? arr[arr.length - 1].Ce.path : arr[arr.length - 1].De.path
                        for ( let i = 0; i < pathArr.length;  i++ ) {
                            let obj = {
                                lng: pathArr[i].lng,
                                lat: pathArr[i].lat,
                            };
                           x.push(obj);
                        }
                         _that.polygonPointList = x;
                    }
                    if (arr[arr.length - 1].CLASS_NAME == "AMap.Circle") {
                        //记录圆形的圆心和半径
                        let pathCir = arr[arr.length - 1].Ce ? arr[arr.length - 1].Ce : arr[arr.length - 1].De
                        _that.radius = pathCir.radius;
                        _that.centerPoint = pathCir.center;
                    }
                }
            });
            _that.overlays = arr;
            function draw(type) {
                switch (type) {
                    case "polygon": {
                        mouseTool.polygon({
                            fillColor: "#ff00ff",
                            strokeColor: "#ff00ff",
                            strokeWeight: 6,
                            strokeOpacity: 0.2,
                            fillOpacity: 0.4,
                            //同Polygon的Option设置
                        });
                        break;
                    }
                    case "circle": {
                        mouseTool.circle({
                            fillColor: "#ff00ff",
                            strokeColor: "#ff00ff",
                            borderWeight: 3,
                            strokeWeight: 6,
                            strokeOpacity: 0.2,
                            fillOpacity: 0.4,
                            strokeStyle: "dashed",
                            strokeDasharray: [10, 10],
                            //同Circle的Option设置
                        });
                        break;
                    }
                }
            }
            for (var i = 0; i < radios.length; i += 1) {
                radios[i].onchange = function (e) {
                    draw(e.target.value);
                    if (e.target.value == "polygon") {
                        _that.sub = 1;
                    } else if (e.target.value == "circle") {
                        _that.sub = 2;
                    } else {
                        _that.sub = 0;
                    }
                };
            }
        },
        sumbitGps() {
            if(this.sub == 1) {
                for (let i = 0; i < this.polygonPointList.length; i++) {
                    if (
                        this.polygonPointList[i].lat == "" ||
                        this.polygonPointList[i].lng == ""
                    ) {
                        this.$Modal.warning({
                            title: "您有必填字段",
                            content: "经纬度不能为空",
                        });
                        return;
                    }
                }
            } else if (this.sub == 2) {
                if(this.radius == '') {
                    this.$Modal.warning({
                        title: "您有必填字段",
                        content: "经纬度不能为空",
                    });
                    return;
                }
            }
            this.type = this.sub;
            this.GPSModal = false;
        },
        submitAll() {
            if (this.ruleName == "") {
                this.$Modal.warning({
                    title: "您有必填字段",
                    content: "报警名称不能为空"
                });
                return;
            }
            if (this.ruleType == 104) {
                if (this.ruleValue == 0 || this.ruleValue == "") {
                    this.$Modal.warning({
                        title: "您有必填字段",
                        content: "请设置怠机时长"
                    });
                    return;
                }
            }
            if (this.ruleType == 105) {
                if (this.ruleValue == 0 || this.ruleValue == "") {
                    this.$Modal.warning({
                        title: "您有必填字段",
                        content: "请设置停机时长"
                    });
                    return;
                }
            }
            if (this.ruleType == 106) {
                if (this.ruleValue == 0 || this.ruleValue == "") {
                    this.$Modal.warning({
                        title: "您有必填字段",
                        content: "请设置工作时长"
                    });
                    return;
                }
            }
            if (this.ruleType == 107) {
                if (this.ruleValue == 0 || this.ruleValue == "") {
                    this.$Modal.warning({
                        title: "您有必填字段",
                        content: "请设置超速报警"
                    });
                    return;
                }
            }
            if (this.ruleType == 110) {
                if (!this.preRotationX && !this.postRotationX && !this.leftRotationZ && !this.rightRotationZ) {
                    this.$Modal.warning({
                        title: "您有必填字段",
                        content: "请设置倾斜角度"
                    });
                    return;
                }
            }
            if (this.ruleType == 101) {
                if (this.type == "") {
                    this.$Modal.warning({
                        title: "您有必填字段",
                        content: "请选择电子围栏"
                    });
                    return;
                }
            }

            if (this.isAdd) {
                let parmas;
                if(this.ruleType == 110){
                    parmas = {
                        ruleType: this.ruleType,
                        name: this.ruleName,
                        deptId: this.porjectTypeId,
                        machRotationRule:{
                            preRotationX: this.preRotationX,
                            postRotationX: this.postRotationX,
                            leftRotationZ: this.leftRotationZ,
                            rightRotationZ: this.rightRotationZ,
                        }
                    };
                }else{
                    parmas = {
                        ruleType: this.ruleType,
                        name: this.ruleName,
                        ruleValue: this.ruleValue == 0 ? "" : this.ruleValue,
                        type: this.type,
                        polygonPointList: this.polygonPointList,
                        centerPoint: {
                            lng: this.centerPoint.lng,
                            lat: this.centerPoint.lat
                        },
                        deptId: this.porjectTypeId,
                        radius: this.radius
                    };
                }
                getMachRuleAdd_V1(parmas).then(res => {
                    if (res.code == 200) {
                        this.$Message.success("操作成功");
                        this.updateModal = false;
                        this.current = 1;
                        this.pageNum = 1;
                        this.keyword = "";
                        this.rule = "";
                        this.getAllList();
                    } else {
                        this.$Message.warning(res.msg);
                    }
                }).catch(error => {
                    console.log(error);
                });
            } else {
                let parmas ;
                if(this.ruleType == 110){
                    parmas = {
                        ruleId: this.ruleId,
                        ruleType: this.ruleType,
                        name: this.ruleName,
                        deptId: this.porjectTypeId,
                        machRotationRule:{
                            preRotationX: this.preRotationX,
                            postRotationX: this.postRotationX,
                            leftRotationZ: this.leftRotationZ,
                            rightRotationZ: this.rightRotationZ,
                        }
                    };
                }else{
                    parmas = {
                        ruleId: this.ruleId,
                        ruleType: this.ruleType,
                        name: this.ruleName,
                        ruleValue: this.ruleValue == 0 ? "" : this.ruleValue,
                        type: this.type,
                        polygonPointList: this.polygonPointList,
                        centerPoint: {
                            lng: this.centerPoint.lng,
                            lat: this.centerPoint.lat
                        },
                        radius: this.radius,
                        deptId: this.porjectTypeId
                    };
                }
                getMachRuleEdit_V1(parmas)
                    .then(res => {
                        if (res.code == 200) {
                            this.$Message.success("操作成功");
                            this.updateModal = false;
                            this.keyword = "";
                            this.rule = "";
                            this.getAllList();
                        } else {
                            this.$Message.warning(res.msg);
                        }
                    })
                    .catch(error => {
                        console.log(error);
                    });
            }
        },
        addTime(index, rows) {
            this.timeId = rows[index].ruleId;
            this.timeModal = true;
            if (rows[index].timeList.length != 0) {
                this.timeList = [];
                rows[index].timeList.forEach(i => {
                    let obj = {
                        time: [i.startTime, i.endTime]
                    };
                    this.timeList.push(obj);
                });
            } else {
                this.timeList =  [
                    {
                        time: []
                    }
                ];
            }
        },
        addTimeRow() {
            let obj = {
                time: []
            };
            this.timeList.push(obj);
        },
        removeTimeRow(i) {
            this.timeList.splice(i, 1);
        },
        sumbitTime() {
            for (let i in this.timeList) {
                //判断是否存在空的时间
                if (this.timeList[i].time[0] == "" || this.timeList[i].time[1] == "") {
                    this.$Modal.warning({
                        title: "您有必填字段",
                        content: "生效时间不能为空"
                    });
                    return;
                }
            }
            let arr = [];
            this.timeList.forEach(i => {
                let obj = {
                    startTime: i.time[0],
                    endTime: i.time[1]
                };
                arr.push(obj);
            });
            let o = [];
            this.timeList.forEach(i => {
                let obj = {
                    startTime: i.time[0],
                    endTime: i.time[1]
                };
                o.push(obj);
            });
            o.map(item => {
                item.startTime = item.startTime.substring(0, 2) * 60 + item.startTime.substring(3, 5) * 1;
                item.endTime = item.endTime.substring(0, 2) * 60 + item.endTime.substring(3, 5) * 1;
            });
            o.sort((a, b) => {
                return a.startTime - b.startTime;
            });
            for (let i = 1; i < o.length; i++) {
                if ( o[i].startTime >= o[i - 1].startTime && o[i].startTime <= o[i - 1].endTime) {
                    this.$Modal.warning({
                        title: "提示",
                        content: "生效时间交叉，请重新选择"
                    });
                    return;
                }
            }
            let parmas = {
                ruleId: this.timeId,
                timeList: arr
            };
            getMachRuleSetTime_V1(parmas)
                .then(res => {
                    if (res.code == 200) {
                        this.$Message.success("操作成功");
                        this.keyword = "";
                        this.rule = "";
                        this.timeModal = false;
                        this.getAllList();
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        filterMethod(query, item) {
            return ( item.machTypeName.indexOf(query) > -1 || item.machCode.indexOf(query) > -1);
        },
        addMach(index, rows) {
            this.$refs.myTransfer.$children["0"]._data.query = "";
            this.$refs.myTransfer.$children["3"]._data.query = "";
            this.machlist = [];
            let parmas = {
                ruleId: rows[index].ruleId
            };
            getMachObjectlist_V1(parmas)
                .then(res => {
                    if (res.code == 200) {
                        this.getAddObjList(this.ruleId, res.data.list);
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
            this.ruleId = rows[index].ruleId;
            this.machObjModal = true;
        },
        getAddObjList(id, arr) {
            this.msgList = [];
            let params = {
                ruleId: id
            };
            getMachObjectAddList_V1(params)
                .then(res => {
                    if (res.code == 200) {
                        let x = res.data.list;
                        for (let i in arr) {
                            x.push(arr[i]);
                        }
                        for (var i = 0; i < x.length; i++) {
                            for (var j = i + 1; j < x.length; j++) {
                                if (x[i].machId == x[j].machId) {
                                    //第一个等同于第二个，splice方法删除第二个
                                    x.splice(j, 1);
                                    j--;
                                }
                            }
                        }
                        for (let i in x) {
                            this.msgList.push({
                                key: i.toString(),
                                label: x[i].machTypeName + x[i].machCode,
                                deptId: x[i].deptId,
                                deptName: x[i].deptName,
                                machId: x[i].machId,
                                machTypeName: x[i].machTypeName,
                                machCode: x[i].machCode
                            });
                        }
                        for (var i = 0; i < arr.length; i++) {
                            for (var j = 0; j < this.msgList.length; j++) {
                                if (arr[i].machId == this.msgList[j].machId) {
                                    this.machlist.push(j.toString());
                                }
                            }
                        }
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        subMitMach() {
            var arr = [];
            for (let i in this.machlist) {
                for (let j in this.msgList) {
                    if (this.machlist[i] == this.msgList[j].key) {
                        arr.push(this.msgList[j].machId);
                    }
                }
            }
            let parmas = {
                ruleId: this.ruleId,
                machIdList: arr
            };
            getMachObjectAdd_V1(parmas)
                .then(res => {
                    if (res.code == 200) {
                        this.machObjModal = false;
                        this.$Message.success("操作成功");
                        this.pageNum = 1;
                        this.getAllList();
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        //查看电子围栏报警详情
        getGpsdetails(index, rows) {
            this.GPSdetailsModal = true;
            if (rows[index].type == 1) {
                //计算多边形中心点的坐标;
                var polygonPointList = rows[index].polygonPointList;
                var a = [];
                var b = [];
                var path = [];
                for (let i in polygonPointList) {
                    a.push(polygonPointList[i].lat);
                    b.push(polygonPointList[i].lng);
                    //多边形的坐标点
                    let x = [polygonPointList[i].lng, polygonPointList[i].lat];
                    path.push(x);
                }
                let latSum = 0;
                for (let i in a) {
                    latSum += a[i];
                }
                var lat = latSum / a.length;
                let lngSum = 0;
                for (let i in b) {
                    lngSum += b[i];
                }
                var lng = lngSum / b.length;
                var polygon = new AMap.Polygon({
                    path: path,
                    strokeColor: "#ff00ff",
                    strokeWeight: 6,
                    strokeOpacity: 0.2,
                    fillOpacity: 0.4,
                    fillColor: "#ff00ff",
                    zIndex: 50
                });
            } else if (rows[index].type == 2) {
                var lat = rows[index].centerPoint.lat;
                var lng = rows[index].centerPoint.lng;
                var radius = rows[index].radius;
                var circle = new AMap.Circle({
                    center: [lng, lat],
                    radius: radius, //半径
                    borderWeight: 3,
                    strokeColor: "#ff00ff",
                    strokeOpacity: 1,
                    strokeWeight: 6,
                    strokeOpacity: 0.2,
                    fillOpacity: 0.4,
                    strokeStyle: "dashed",
                    strokeDasharray: [10, 10],
                    // 线样式还支持 'dashed'
                    fillColor: "#ff00ff",
                    zIndex: 50
                });
            }
            var map = new AMap.Map("fenceMap", {
                resizeEnable: true, //是否监控地图容器尺寸变化
                zoom: 14, //初始化地图层级
                center: [lng, lat], //初始化地图中心点
                layers: [
                    // 卫星
                    new AMap.TileLayer.Satellite(),
                    // 路网
                    new AMap.TileLayer.RoadNet()
                ]
            });
            // 构造官方卫星、路网图层
            var satelliteLayer = new AMap.TileLayer.Satellite();
            var roadNetLayer = new AMap.TileLayer.RoadNet();

            // 批量添加图层
            map.add([satelliteLayer, roadNetLayer]);
            if (rows[index].type == 1) {
                map.add(polygon);
                // 缩放地图到合适的视野级别
                map.setFitView([polygon]);
            } else if (rows[index].type == 2) {
                circle.setMap(map);
                // 缩放地图到合适的视野级别
                map.setFitView([circle]);
            }
        },
        //报警接收人
        addEmp(index, rows) {
            this.isEmplist = [];
            this.checkList = [];
            let params = {
                ruleId: rows[index].ruleId
            };
            getMachUseList_V1(params)
                .then(res => {
                    if (res.code == 200) {
                        for (let i in res.data.msgChannelList) {
                            for (let j in this.TZList) {
                                if ( res.data.msgChannelList[i] == this.TZList[j].id) {
                                    this.checkList.push(this.TZList[j].name);
                                }
                            }
                        }
                        this.getuserList(res.data.userList);
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
            this.empModal = true;
            this.ruleId = rows[index].ruleId;
        },
        getuserList(arr) {
            this.empList = [];
            let parmas = {
                deptId: this.porjectTypeId
            };
            getMsgRuleAvailableUsers(parmas)
                .then(res => {
                    if (res.code == 200) {
                        let list = res.data.list;
                        let newobj = {};
                        list = list.reduce((preVal, curVal) => {
                            newobj[curVal.userId] ? '' : newobj[curVal.userId] = preVal.push(curVal);
                            return preVal
                        }, []);
                        for (let i in list) {
                            this.empList.push({
                                key: i.toString(),
                                label: list[i].nickName + list[i].phone,
                                userId: list[i].userId,
                                phone: list[i].phone,
                                username: list[i].username,
                                nickName: list[i].nickName
                            });
                        }
                        for (var i = 0; i < arr.length; i++) {
                            for (var j = 0; j < this.empList.length; j++) {
                                if (arr[i].userId == this.empList[j].userId) {
                                    this.isEmplist.push(j.toString());
                                }
                            }
                        }
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        suBmitEmp() {
            var arr = [];
            for (let i in this.isEmplist) {
                for (let j in this.empList) {
                    if (this.isEmplist[i] == this.empList[j].key) {
                        arr.push({
                            userId: this.empList[j].userId,
                            nickName: this.empList[j].nickName,
                            phone: this.empList[j].phone
                        });
                    }
                }
            }
            let msgChannelList = [];
            for (let i in this.checkList) {
                for (let j in this.TZList) {
                    if (this.checkList[i] == this.TZList[j].name) {
                        msgChannelList.push(this.TZList[j].id);
                    }
                }
            }
            let parmas = {
                ruleId: this.ruleId,
                userList: arr,
                msgChannelList: msgChannelList
            };
            getMachUseAdd_V1(parmas)
                .then(res => {
                    if (res.code == 200) {
                        this.empModal = false;
                        this.$Message.success("操作成功");
                        this.pageNum = 1;
                        this.getAllList();
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        //关闭弹框
        cancel(type) {
            if (type == 0) {
                this.updateModal = false;
            } else if (type == 1) {
                this.delMachModal = false;
            } else if (type == 2) {
                this.sub = 0;
                //每次绘制之前清除之前的绘制的图形
                this.fenceMap.clearMap();
                this.GPSModal = false;
            } else if (type == 3) {
                this.timeModal = false;
            } else if (type == 4) {
                this.machObjModal = false;
            } else if (type == 5) {
                this.empModal = false;
            }
        }
    }
};
</script>

<style scoped lang="less">
@import "./../../assets/style/themeBase.less";
@import "./../../assets/style/slider.less";
@import "./../../assets/style/modal.less";
</style>

<style scoped lang="scss">
// @import "./../../assets/style/mach/mainContent.scss";
@import "./../../assets/style/mach/msgModal.scss";
.mainContent {
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    background: #F5F5F5;
    .search {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-radius: 10px;
        background:#fff;
        padding: 10px;
        box-sizing: border-box;
        &.searchBox{
            justify-content: flex-start;
            flex-wrap: wrap;
            padding: 0 20px 15px;
            .list{
                margin-right: 50px;
                span{
                    &:first-of-type{
                        color: #373D41;
                        font-family: MicrosoftYaHeiLight;
                    }
                }

            }
        }
        .left{
            width: 50%;
            /deep/ .ivu-tabs-bar{
                width: 100%;
                margin: 0 auto;
                border: none;
            }
            /deep/ .ivu-tabs-tab{
                padding-bottom: 20px;
                box-sizing: border-box;
            }
        }
        .right{
            margin-top: -20px;
        }
        .list{
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-right: 20px;
            margin-top: 20px;
            span{
                width: 100px;
                text-align: right;
            }
            .ulbox1{
                list-style: none;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                margin-right: 20px;
                .libox1{
                    width: 50px;
                    height: 32px;
                    text-align: center;
                    line-height: 32px;
                    color: var(--themeColor);
                    cursor: pointer;
                    border: 1px solid var(--themeColor);
                }
                li:first-child{
                    border-radius: 16px 0  0 16px;
                }
                li:last-child{
                    border-radius: 0 16px  16px 0;
                }
                .active{
                    background: var(--themeColor);
                    color: #fff;
                    border: none;
                }
            }
        }
    }
    .tabBox{
        width:100%;
        margin-top: 10px;
        padding: 20px;
        box-sizing: border-box;
        background-color: #fff;
        border-radius: 10px;
        // .down{
        //     padding: 20px 0 0 20px;
        // }
        .tableList{
            margin-top: 10px;
            width: 100%;
            /deep/ .el-table{
                color: #181818;
                font-family: MicrosoftYaHei;
                font-size: 14px;
                td,
                th.is-leaf{
                    border-bottom: none;
                }
                tr{
                    border: none;
                }
                thead th{
                    color: #666666;
                    font-weight: 400;
                }
            }
            /deep/ .el-table__row{
                background-color: #fff;
                cursor: pointer;
            }
            /deep/ .el-table--striped .el-table__body tr.el-table__row--striped td{
                background-color: #F3F6FD ;
                cursor: pointer;
            }
        }
    }
}
.rule {
    width: 100%;
    display: flex;
    justify-content: space-between;
    //   border-bottom:  1px solid #EBEEF5;
    p {
        width: 33.3%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
.demo-table-expand:last-child {
    border-bottom: none;
}
.demo-table-expand {
    border-bottom: 1px solid #ebeef5;
}
.warn {
    width: 100%;
    margin-top: 10px;
    h2 {
        margin-top: 15px;
        font-size: 14px;
        font-weight: 400;
    }
    .list {
        width: 90%;
        margin: 0 auto;
        margin-top: 10px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .item1 {
            margin-left: 10px;
        }
        span {
            padding: 0 5px;
        }
    }
    .box {
        width: 90%;
        margin: 0 auto;
        margin-top: 20px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        max-height: 300px;
        overflow-y: scroll;
        // .box::-webkit-scrollbar {
        //   display: none;
        // }

        p {
            width: 100px;
            padding: 5px;
            border: 1px dashed #515a6e;
            margin-left: 10px;
            height: 30px;
            border-radius: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }
    }
    .box::-webkit-scrollbar {
        // width: 6px;
        display: none;
    }
}
#container {
    height: 100%;
}
#fenceMap {
    height: 100%;
}
.msg{
    width: 100%;
    height: 600px;
    display: flex;
    justify-content: space-between;
    .fence {
        width: calc(100% - 300px);
        height: 100%;
        position: relative;
        #container {
            width: 100%;
            height: 100%;
            // position: relative;
        }
    }
    .right {
        width: 300px;
        height: 100%;
        background: #fff;
        position: relative;
        .top {
            width: 300px;
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            input {
                margin-right: 10px;
                cursor: pointer;
            }
            span {
                margin-right: 30px;
            }
        }
        .isShow {
            width: 200px;
            margin: 0 auto;
        }
        .center {
            width: 280px;
            margin: 0 auto;
            height: 400px;
            overflow-y: scroll;
            p {
                width: 100%;
                height: 50px;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                span {
                    width: 80px;
                    text-align: center;
                    height: 50px;
                    line-height: 50px;
                }
            }
            div {
                width: 100%;
                height: 50px;
                display: flex;
                justify-content: flex-start;
                align-items: center;
            }
        }
        .center::-webkit-scrollbar {
            display: none;
        }
    }
}
.prj {
    width: 96%;
    height: 50px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin: 10px auto 0;
    background: #fff;
    border-radius: 5px 5px 0 0;
}
.ask {
    width: 100%;
    display: flex;
    height: 30px;
    justify-content: flex-start;
    align-items: center;
    border-radius: 20px;
    border: 1px solid #e5e5e5;
    margin: 0 auto 10px;

    span {
        margin-right: 10px;
        margin-left: 10px;
    }
}
.searchAddress{
    width: 300px;
    position: absolute;
    top: 5px;
    left: 300px;
    display: flex;
    justify-content: space-between;
}
/deep/ .tableClassName{
    padding-left: 30px;
}
/deep/ .transfer{
    position: relative;
    width: 90%;
    margin: auto;
    // .el-transfer-panel__header{
    //     background-color: #E5ECFD;
    //     .el-checkbox__label{
    //         color: #1891FF;
    //     }
    // }
    // .el-transfer-panel{
    //     border: 1px solid #1891FF;
    // }
    // .el-transfer-panel__body{
    //     height: 100%;
    // }
    // .el-transfer-panel__list.is-filterable{
    //     height: 300px;
    // }
    // .el-transfer-panel__empty{
    //     display: none;
    // }
}
.red{
    display: inline-block;
    background-color:rgba(255, 72, 72, 0.1);
    border-radius:2px;
    border:1px solid #FF4848;
    color:#FF4848;
    padding:0 8px;
}
.green{
    display: inline-block;
    background-color: rgba(63, 207, 119, 0.1);
    border:1px solid #28D79C;
    color:#3FCF77;
    border-radius:2px;
    padding:0 8px;
}

</style>
